<template>
  <scroll-view scroll-y class="scroll-view">
    <view class="detail">
      <text class="item-title" space="nbsp">【题】</text>
      <rich-text space="nbsp" :nodes="detail?.content" class="detail-item"></rich-text>
      <text class="item-title">【答案】</text>
      <rich-text space="nbsp" :nodes="detail?.answer"></rich-text>
      <text class="item-title">【解析】</text>
      <rich-text space="nbsp" :nodes="detail?.explain"></rich-text>
      <view v-if="detail?.video_src !== ''">
        <text class="item-title">【微视频解析】</text>
        <uni-icons type="videocam" size="13" @click="onClickPlayVideo"></uni-icons>
        <text class="item-title">点击播放，消费1-2个库币</text>
      </view>
      <uni-popup ref="popupPlayVideo" type="dialog" background-color="#fff">
        <view>
          <video v-if="detail?.video_src !== ''" id="myVideo" :src="detail?.video_src" @error="videoErrorCallback"
            :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
        </view>
        <view class="uni-list uni-common-mt">
          <view class="uni-list-cell">
            <view>
              <view class="uni-label">弹幕内容</view>
            </view>
            <view class="uni-list-cell-db">
              <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
            </view>
          </view>
        </view>
        <view class="uni-btn-v">
          <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
        </view>
      </uni-popup>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { QuestionItem } from '@/types/home'
import { postPlayVideoAPI } from '@/services/home'
import { useDetailStore, useComposeStore } from '@/stores'
import UniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import UniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
type danmuItem = {
  text: string
  color: string
  time: number
}
// 获取缓存store
const detailStore = useDetailStore()
const composeStore = useComposeStore()
const index = ref<number>(0)
let detail = ref<QuestionItem>()
const danmuList = ref<danmuItem[]>([])
const danmuValue = ref<string>('')
const videoContext = ref<any>()
const popupPlayVideo = ref<any>()

// 发送弹幕
const sendDanmu = () => {
  videoContext.value.sendDanmu({
    text: danmuValue.value,
    color: getRandomColor(),
  })
  danmuValue.value = ''
}
//处理视频播放失败
const videoErrorCallback = (e: any) => {
  uni.showModal({
    content: e.target.errMsg,
    showCancel: false,
  })
}
// 弹幕字体随机颜色
const getRandomColor = () => {
  const rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}
// 点击播放视频按钮，跳出弹窗
const onClickPlayVideo = async () => {
  popupPlayVideo.value.open()
  let data_params = { video: detail.value!.video_id }
  const res = await postPlayVideoAPI(data_params)
  console.log('提交观看视频结果：', res)
  if (res.code == 200) {
    console.log('提交已观看视频成功')
  } else if (res.code == 202) {
    console.log('该视频是历史已看视频')
  } else {
    console.log('提交已观看视频失败')
  }
}
// 页面加载, 如果有index参数，表示从compose组卷页面跳转过来，否则从做题页面跳转过来
onLoad((opts: any) => {
  console.log('页面加载参数', opts)
  if (opts.index !== undefined) {
    index.value = opts.index
    detail.value = composeStore.compose[index.value]
    console.log('通过缓存数组获取detail', detail.value)
  } else {
    detail.value = detailStore.getDetail()
    console.log('从缓存对象获取的题目：', detail.value)
  }
})
</script>

<style lang="scss" scoped>
.scroll-view {
  flex: 1;
}

.detail {
  margin: 2rpx;
  padding: 1rpx;
  font-size: 29rpx;

  .item-title {
    opacity: 0.5;
  }
}

.detail-item {
  margin: 10rpx;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}
</style>
